import React from 'react';
import styled from '@emotion/styled';

interface MessageItemVideoProps {
	content: string;
	onPreview: () => void;
}

const MessageItemVideo: React.FC<MessageItemVideoProps> = ({ content, onPreview }) => {
	return (
		<VideoContainer>
			<Video playsInline webkit-playsinline="true" x5-playsinline="true" x-webkit-airplay="true" onClick={onPreview}>
				<source src={content} type="video/mp4" />
			</Video>
		</VideoContainer>
	);
};

export default MessageItemVideo;

const VideoContainer = styled.div`
	height: 100px;
	display: flex;
	justify-content: flex-start;
`;

const Video = styled.video`
	display: inline-block;
	height: 100%;
	object-fit: contain;
	cursor: pointer;
`;
